  <template>
  <!-- 配置信息 -->
  <div class="container">
    <el-form style="margin-top: 10px" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="能力名称：" required>
            <el-input
              v-model="formData.serviceName"
              clearable
              style="width: 240px"
              placeholder="请输入能力名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="能力编码：">{{
            formData.serviceCode || "自动生成"
          }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="能力别名：" required>
            <el-input
              v-model="formData.servicePath"
              clearable
              style="width: 240px"
              placeholder="请输入英文或数字"
              @input="handleInput"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属分类：" required>
            <el-cascader
              v-model="formData.cateIds"
              :options="classifyList"
              :show-all-levels="false"
              :props="{
                checkStrictly: true,
                value: 'cateId',
                label: 'cateName',
              }"
              style="width: 240px"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="能力权限：">
            <el-select
              v-model="formData.permType"
              placeholder="请选择所需权限"
              class="perm-select"
            >
              <el-option
                v-for="type in permTypes"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="能力描述：" required>
            <el-input
              v-model="formData.serviceDesc"
              style="width: 560px"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="能力类型：">
            <template v-if="serverReleaseType === '2'">
              <dict-selector
                v-model="formData.serviceType"
                :dictData="protocolTypeList"
                placeholder="请选择能力类型"
                :clearable="false"
                style="width: 240px"
                disabled
              />
            </template>
            <template v-else>
              {{ selectDictLabel(protocolTypeList, formData.serviceType) }}
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 协议转换时使用配置信息带过来的请求方式, API直连使用api选择带的请求方式 -->
          <el-form-item label="请求方式：">{{
            formData.httpRequestMethod
          }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求路径：">
            {{ formData.mockUrl || "自动生成" }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.serviceType === '3'">
        <el-col :span="12">
          <el-form-item label="JMS数据源：">
            <el-select
              v-model="formData.jmsDatasourceCode"
              placeholder="请选择JMS数据源"
              style="width: 240px"
            >
              <el-option
                v-for="item in jmsDatasource"
                :key="item.jmsCode"
                :label="item.jmsName"
                :value="item.jmsCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消息类型：">
            <el-radio-group v-model="formData.jmsType">
              <el-radio label="queue">Queue</el-radio>
              <el-radio label="topic">Topic</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.serviceType === '3'">
        <el-col :span="12">
          <el-form-item
            :label="formData.jmsType === 'queue' ? 'Queue名称' : 'Topic名称'"
          >
            <el-input
              v-model="formData.jmsDestinationName"
              :placeholder="`请输入${
                formData.jmsType === 'queue' ? 'Queue名称' : 'Topic名称'
              }`"
              clearable
              style="width: 240px"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="JMS角色：">
            <el-radio-group v-model="formData.jmsRole">
              <el-radio label="C">消费者</el-radio>
              <el-radio label="P">生产者</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-collapse v-model="showMore">
        <el-collapse-item name="1">
          <template #title>
            <div style="font-size: 16px;color: green; font-weight: bold;text-align: right; padding: 10px;width: 100%">
              更多
            </div>
          </template>
          <el-row>
            <el-col :span="12">
              <el-form-item label="限流开关：">
                <el-switch v-model="formData.limitCtrlStatus"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="限流方式：">
                <el-radio-group v-model="formData.limitCtrlType">
                  <el-radio label="1">QPS</el-radio>
                  <el-radio label="2">线程数</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="限流阈值：">
                <el-input
                  v-model="formData.limitCtrlParamval"
                  clearable
                  style="width: 240px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警响应时间：">
                <el-input
                  v-model="formData.alarmSecs"
                  placeholder="请输入预警响应时间"
                  :min="0"
                  type="number"
                  style="width: 240px"
                >
                  <template slot="append">秒</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="16">
                  <el-form-item label="超时时间：">
                    <el-input
                      v-model="formData.timeoutSecs"
                      placeholder="请输入超时时间"
                      :min="0"
                      type="number"
                      style="width: 240px"
                    >
                      <template slot="append">秒</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="tips">(0表示采用平台默认控制)</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col
              :span="12"
              v-if="serverReleaseType === '3' && zhpzData.originApiType === '1'"
            >
              <el-form-item label="入参序列化：">
                <el-checkbox v-model="zhpzData.isParamInSerialize"></el-checkbox>
              </el-form-item>
              <el-form-item label="出参序列化：">
                <el-checkbox v-model="zhpzData.isParamOutSerialize"></el-checkbox>
              </el-form-item>
            </el-col>
            <!-- API直连显示失败重试次数 -->
            <el-col :span="12" v-if="serverReleaseType === '1'">
              <el-row>
                <el-col :span="16">
                  <el-form-item label="失败重试次数：">
                    <el-input
                      v-model="formData.retryTimes"
                      placeholder="请输入失败重试次数"
                      :min="0"
                      type="number"
                      style="width: 240px"
                    >
                      <template slot="append">次</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="tips">(0表示不重试)</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>

      <!-- 显示API信息 -->
      <template v-if="serverReleaseType === '1' || serverReleaseType === '3'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="API名称：">
              {{ chooseApiInfo.apiName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="API编码：">
              {{ chooseApiInfo.apiCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="API描述：">
              <el-input
                :value="chooseApiInfo.apiDesc"
                style="width: 560px"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder=""
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <!-- 显示数据集信息 -->
      <template v-if="serverReleaseType === '4'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="数据集名称：">
              {{ chooseSjjInfo.datasetName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="查询SQL：">
              <el-input
                :value="chooseSjjInfo.selectSql"
                style="width: 560px"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder=""
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </div>
</template>

<script>
// import { mapState } from "vuex";
import {serviceStore} from '@slc/store/service';
import {mapActions, mapState} from 'pinia';
import { getJmsDatasource } from "@slc/api/slc/api";
export default {
  name: "step-pzxx",
  data() {
    return {
      showMore: '',
      jmsDatasource: [],
      permType: '', // 存储选中的权限类型
      permTypes: [
        { label: '无限制', value: '' },
        { label: '新增', value: 'insert' },
        { label: '修改', value: 'update' },
        { label: '删除', value: 'delete' },
        { label: '查询', value: 'view' },
        { label: '导入', value: 'import' },
        { label: '导出', value: 'export' }

      ]
    };
  },
  computed: {
    ...mapState(serviceStore, [
      "zhpzInfo",
      "classifyList",
      "chooseApiInfo",
      "chooseSjjInfo",
      "serverReleaseType",
      "protocolTypeList",
      "pzxxInfo",
    ]),
    formData: {
      get() {
        return this.pzxxInfo;
      }
      // set(val) {
      //   this.setPzxxInfo(val);
      // },
    },
    zhpzData: {
      get() {
        return this.zhpzInfo;
      }
      // set(val) {
      //   this.setZhpzInfo(val);
      // },
    },
  },
  activated() {
    if (this.formData.serviceType === "3") {
      this.handleJmsData();
    }
  },
  watch: {
      formData: {
          handler(val) {
              this.setZhpzInfo(val)
          },
          deep: true
      },
      zhpzData: {
          handler(val) {
              this.setZhpzInfo(val)
          },
          deep: true
      },
    "formData.serviceType"(val) {
      if (val === "3") {
        this.handleJmsData();
      }
    },
  },
  methods: {
      ...mapActions(serviceStore, ['setPzxxInfo', 'setZhpzInfo']),
      async handleJmsData() {
      const res = await getJmsDatasource();
      if (res.code === "200") {
        this.jmsDatasource = res.data || [];
      }
    },
    handleInput(value) {
      // 使用正则表达式匹配只允许字母
      const regex = /^[0-9a-zA-Z]*$/;
      if (!regex.test(value)) {
        // 如果输入不是字母，则清空输入框
        //this.formData.servicePath = '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding-left: 20px;
  .tips {
    color: #999;
    padding: 10px 0 0 10px;
  }
}
</style>
